<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #box {
            width: 1200px;
            height: 700px;
            border: 1px solid #ccc;
            margin: 150px;
        }

        #min {
            float: left;
            width: 400px;
            height: 400px;
            position: relative;
        }

        b {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background: blue;
            opacity: 0.5;
            display: none;
        }

        #max {
            float: right;
            width: 400px;
            height: 400px;
            overflow: hidden;
            display: none;
            position: relative;
        }

        #imgs {
            position: absolute;
            left: 0;
            top: 0;

        }
    </style>
</head>

<body style="height:2000px">
    <div id="box">

        <div id="min"><img src="img/min.jpg" alt=""><b></b></div>
        <div id="max"><img src="img/max.jpg" alt="" id="imgs"></div>

    </div>
    <script>
        //1》鼠标移入到min这个盒子中，显示出来 放大图片的盒子和小阴影部分
        //2》阴影跟随鼠标移动====》
        var min = document.getElementById("min"),
            max = document.getElementById("max"),
            b = document.getElementsByTagName("b")[0],
            imgs = document.getElementById("imgs");

        min.onmousemove = function (e) {

            b.style.display = "block";
            max.style.display = "block";
            var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var x = e.clientX + scrollLeft - min.offsetLeft - b.offsetWidth / 2;
            var y = e.clientY + scrollTop - min.offsetTop - b.offsetHeight / 2;

            if (x < 0) {
                x = 0;
            } else if (x > min.offsetWidth - b.offsetWidth) {
                x = min.offsetWidth - b.offsetWidth;
            }

            if (y < 0) {
                y = 0;
            } else if (y > min.offsetHeight - b.offsetHeight) {
                y = min.offsetHeight - b.offsetHeight;
            }

            b.style.left = x + "px";
            b.style.top = y + "px";


            imgs.style.left = -2 * x + "px";
            imgs.style.top = -2 * y + "px";

        }

        min.onmouseout = function () {

            b.style.display = "none";
            max.style.display = "none";
        }
    </script>
</body>

</html>